<template>
	<div style="position: relative;">
		<el-row align="center" style="100%">
			  <el-col :span="4" style="height: 100%;padding: 10px"><div>
				<div class="tops">学号: {{stuNo}}</div>
				<div class="tops">姓名: {{stuName}}</div>
				<div class="tops">剩余时间: {{moveMin}}</div>
			  </div></el-col>
			  <el-col :span="13" style="padding: 10px;"><div>
				<div style="margin-bottom: 50px;">
					<span>{{paperName}}</span>
					<span>{{deadline}}</span>
				</div>
				<div class="main">
					<div v-for="(test,index) in testList" :key="index" style="margin-top: 15px;
		" >
						<span>{{index+1}}</span>、
						<span style="font-size: 20px;">{{test.content}}</span>
						<!-- 循环四个选择 -->
			            <br/>
						<br/>
						<div>
							<el-radio v-model="testAnswer[index].answer" label="A"></el-radio>
							.{{test.a}}
						</div>
						<div style="margin-top: 10px;">
							<el-radio v-model="testAnswer[index].answer" label="B"></el-radio>
							.{{test.b}}
						</div>
						<div style="margin-top: 10px;">
							<el-radio v-model="testAnswer[index].answer" label="C"></el-radio>
							.{{test.c}}
						</div>
						<div style="margin-top: 10px;margin-bottom: 5px;">
							<el-radio v-model="testAnswer[index].answer" label="D"></el-radio>
							.{{test.d}}
						</div>
					</div>
				</div>
			  </div></el-col>
			  <el-col :span="7"><div>
				选择题区
			  </div></el-col>
			</el-row>
			<div style="position: fixed;
    bottom: 20px;
    right: 10px;">
				<el-button @click="submit">交卷</el-button>
			</div>
	</div>


</template>

<script>
import { log } from 'video.js'
	export default {
		created() {
			this.$route.query.course
			this.paperId = this.$route.query.paper
			this.paperName = this.$route.query.paperName
			this.getTest()
			this.user = JSON.parse(localStorage.getItem("user"))
			this.getTime()
		},
		data(){
			return{
				paperId:0,
				deadline:"",
				paperName:"",
				testList:[],
				testAnswer:[],
				stuNo:0,
				stuName:"未经",
				deadline:"",
				user:{},
				moveMin:""
			}
		},
		methods:{
			　// 补0
			    formatBit (val) {
			      val = +val
			      return val > 9 ? val : '0' + val
			    },
			　　 // 秒转时分秒，求模很重要，数字的下舍入
			    formatSeconds (time) {
			      let min = Math.floor(time % 3600)
			      let val = this.formatBit(Math.floor(time / 3600)) + ':' + this.formatBit(Math.floor(min / 60)) + ':' + this.formatBit(time % 60)
			      return val
			    },
			　　 // 定时器
			    minReturn (a) {
			      let time = a
			      let t = setInterval(() => {
			        time--
			        this.moveMin = this.formatSeconds(time)
			        if (time <= 0) {
			          clearInterval(t)
			        }
			      }, 1000)
},
			getTime(){
				this.request.get("/paperScore/expire/"+this.paperId).then(resp=>{
					this.minReturn(resp.data)
				})
			},
			submit(){
				//提交试卷
				 this.$confirm('确定提交试卷吗?', '提示', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          type: 'warning'
				        }).then(() => {
							//发送请求提交试卷
							this.request.post("/paperScore/saveTest/"+this.paperId+"/"+this.user.id,this.testAnswer).then(resp=>{
								this.$router.push({
									path:"/okTest",
									query:{score:resp.data.score}
								})
							})
				        }).catch(()=>{
							alert(123)
						})
			},
			getTest(){
				this.request.get("/paperTest/getOption/"+this.paperId).then(resp=>{
					this.testList = resp.data
					let testIds = resp.data.map(item=>{
						return {
								id:item.id,
								answer:""
							}
					})
					this.testAnswer = testIds
				})
			},
			getDeadline(){
				// 获取剩余时间
				
			}
		}
	}
</script>

<style>
	.tops{
		margin-top: 10px;
	}
</style>